<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>淘宝</title>
		<link rel="stylesheet" href="css/taobaoxq.css" />
	</head>
	<body>
		<div class="bbig">
			<div id="big"></div>
			<div class="box">
				<ul class="box01">
					<li><img src="img/001.webp" alt="失败" id="pic" /></li>
					<li><img src="img/002.webp" alt="失败" id="pic1" /></li>
					<li><img src="img/003.webp" alt="失败" id="pic2" /></li>
					<li><img src="img/004.webp" alt="失败" id="pic3" /></li>
					<li><img src="img/005.webp" alt="失败" id="pic4" /></li>
				</ul>
			</div>
			<div class="xx">
			<!-- 	<ul class="xq">
					<li>商品名称</li><br>
					<li>商品详情</li><br>
					<li>商品价格</li><br>
					<li>商品数量</li><br>
					<button>加入购物车</button>
				</ul> -->
			</div>
		</div>

		<script type="text/javascript">
			window.onload = function () {
				var imgbig = document.getElementById("big");
				var pic = document.getElementById("pic");
				var pic1 = document.getElementById("pic1");
				var pic2 = document.getElementById("pic2");
				var pic3 = document.getElementById("pic3");
				var pic4 = document.getElementById("pic4");

				pic.onmouseover = function () {
					imgbig.style.backgroundImage = "url(01big.jpg)";
				};
				pic1.onmouseover = function () {
					imgbig.style.backgroundImage = "url(02big.jpg)";
				};
				pic2.onmouseover = function () {
					imgbig.style.backgroundImage = "url(03big.jpg)";
				};
				pic3.onmouseover = function () {
					imgbig.style.backgroundImage = "url(04big.jpg)";
				};
				pic4.onmouseover = function () {
					imgbig.style.backgroundImage = "url(05big.jpg)";
				};
			};
		</script>
	</body>
</html>
